<template>
 <div class="box">
  <el-button type="success" @click="back" class="btns">退出</el-button>
    <div class="content">
      <div v-html="sizeForm.name"></div>
      <div class="title">
        <div class="imgbox">
          <img :src="this.sizeForm.pho" alt="">
        </div>
        <div class="fontbox">
          <div>{{ sizeForm.nam }}</div>
          <div class="timebox">{{ sizeForm.time | dateChage }}</div>
        </div>
      </div>
      <div v-html="sizeForm.txt"></div>
      <div class="post">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请写下你的评论"
          v-model="infoData.text">
        </el-input>
        <el-button @click="send">发送</el-button>
      </div>
      <div>
        共有{{infoList.length}}条评论
        <ul class="infoList">
          <li v-for="data,index in infoList" :key = index>
            <div class="list">
              <div class="top">
                <img :src="'http://localhost:3000'+data.pho" alt="">
              </div>
              <div class="bott">
                  <div>{{ data.name }}</div>
                  <div> {{ data.info }}</div>
                  <div class="date"> {{ data.time | dateChage }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
 </div>
</template>

<script>
import http from '@/util/http'
import { Message } from 'element-ui'

export default {
  mounted () {
    this.renderText()
    this.renderList({ info: this.$route.params.info, token: window.localStorage.getItem('token') })
    // this.showList(this.$route.params.info)
  },
  data () {
    return {
      sizeForm: {
        token: window.localStorage.getItem('token'),
        name: '',
        txt: '',
        nam: '',
        pho: '',
        time: ''
      },
      data: {},
      infoData: {
        uid: '',
        aid: '',
        text: '',
        token: window.localStorage.getItem('token')
      },
      // 消息表
      infoList: {
        time: '',
        name: '',
        txt: '',
        pho: ''
      }
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    // 渲染文章
    renderText () {
      this.data = this.$route.params.info
      http.get('/api/home/info', { params: this.data }).then(res => {
        if (res.data.code === 1) {
          this.sizeForm.name = res.data.msg[0].header
          this.sizeForm.txt = res.data.msg[0].content
          this.sizeForm.nam = res.data.msg[0].name
          this.sizeForm.pho = 'http://localhost:3000' + res.data.msg[0].pho
          this.sizeForm.time = res.data.msg[0].date
        }
      })
    },
    send () {
      this.infoData.aid = this.$route.params.info.aid
      this.infoData.uid = this.$route.params.info.uid
      http.post('/api/art/show', this.infoData).then(res => {
        if (res.data.code === 1) {
          Message.success('评论发表成功')
          this.renderList({ info: this.infoData, token: window.localStorage.getItem('token') })
        } else {
          Message.error('评论发表失败')
        }
      })
      this.infoData.text = ''
    },
    // 渲染评论列表
    renderList (obj) {
      http.get('/api/art/show', { params: obj }).then(res => {
        if (res.data.code === 1) {
          this.infoList = res.data.msg
        }
      })
    }
    // 第一次加载渲染评论列表
    // showList (obj) {
    //   http.get('/api/art/list', { params: obj }).then(res => {
    //     if (res.data.code === 1) {
    //       this.infoList = res.data.msg
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>

.btns{
    position: absolute;
    top: .625rem;
    left: .625rem;
}
.box{
      width: 100%;
      height: 100vh;
      background-image: url('@/assets/post.jpg');
      background-position: center;
      background-size: cover;
      overflow: auto;
      .content{
        margin: 1.25rem;
        padding: 1.25rem;
        width: 50rem;
        margin: 0 auto;
        background-color: white;
        opacity: .9;

      .title{
        display: flex;
        margin: 1.25rem 0 ;
        .imgbox{
          height: 4rem;
          width:4rem;
          border-radius: 50%;
          overflow: hidden;
          img{
            height: 100%;
            width:100%;
          }
        }
        .fontbox{
          margin-left: 1.875rem;
          .timebox{
            font-size: 14px;
            color:#C9CCD0;
            margin-top:1.5625rem;
          }
        }
      }
       ul{
        list-style: none;
       }
       .post{
        margin: .625rem 0;
        display: flex;
        justify-content: space-around;
        .el-button{
          margin-left: .625rem;
        }
       }

      }
}

.infoList{
  li{
    height: 6.25rem;
    width: 100%;
    margin: .625rem;
    .list{
    display: flex;
    height: 100%;
    .bott{
      margin-left: 1.25rem;
     div{
      margin-bottom: .625rem  ;
     }
      .date{
        font-size: .75rem;
        color: #C9CCD0;
      }
    }
    .top{

    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    overflow: hidden;
    img{
      height: 100%;
      width: 100%;
    }
  }
  }
  }

}

</style>
